<template>
    <div class="legend">
        <div class="point">
            图例:
            <span class="tips"></span> 离线&nbsp;&nbsp;&nbsp;
            <span class="tips"></span> {{$route.path == '/iot_alarm'?'正常':'在线'}}&nbsp;&nbsp;&nbsp;
            <span class="tips"></span> 报警&nbsp;&nbsp;&nbsp;
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        legend() {
            let path = this.$route.path.replace('/','');
            /* let className = '';
            if (path == '/iot_device_point') {
                //绑点
                className = 'bind';
            } else if (path == '/iot_card') {
                //一卡通
                className = 'door';
            } else if (path == '/iot_parking') {
                //停车场
                className = 'parking';
            } else if (path == '/iot_video_monitor') {
                //视频监控
                className = 'camera';
            } else if (path == '/iot_alarm') {
                //安防报警
                className = 'alarm';
            } else if (path == '/iot_fire_monitor') {
                //火灾
                className = 'fire';
            } */
            let classNameMap = {
                iot_device_point: 'bind',
                iot_card: 'door',
                iot_parking: 'parking',
                iot_video_monitor: 'camera',
                iot_alarm: 'alarm',
                iot_fire_monitor: 'fire',
            };
            let dom = document.querySelectorAll('.tips');
            for (let i = 0; i < dom.length; i++) {
                dom[i].className = classNameMap[`${path}`];
                // dom[i].className = className
            }
        },
    },
    updated() {
        this.legend();
    },
    mounted() {
        this.legend();
        if (this.$route.path == '/iot_alarm') {
            let str = document.querySelector('.point');
            console.log(str);
            str.innerHTML = str.innerHTML.replace('离线', '');
        }
    },
};
</script>

<style scoped>
.camera:nth-child(1) {
    background: url('../../assets/images/camera0.svg') no-repeat;
}
.camera:nth-child(2) {
    background: url('../../assets/images/camera1.svg') no-repeat;
}
.camera:nth-child(3) {
    background: url('../../assets/images/camera2.svg') no-repeat;
}
.fire:nth-child(1) {
    background: url('../../assets/images/fire0.svg') no-repeat;
}
.fire:nth-child(2) {
    background: url('../../assets/images/fire1.svg') no-repeat;
}
.fire:nth-child(3) {
    background: url('../../assets/images/fire2.svg') no-repeat;
}
.alarm:nth-child(1) {
    background: url('../../assets/images/alarm2.svg') no-repeat;
    display: none;
}
.alarm:nth-child(2) {
    background: url('../../assets/images/alarm1.svg') no-repeat;
}
.alarm:nth-child(3) {
    background: url('../../assets/images/alarm0.svg') no-repeat;
}
.door:nth-child(1) {
    background: url('../../assets/images/door_close_off.svg') no-repeat;
}
.door:nth-child(2) {
    background: url('../../assets/images/door_close_on.svg') no-repeat;
}
.door:nth-child(3) {
    background: url('../../assets/images/door_warn.svg') no-repeat;
}
.parking:nth-child(1) {
    background: url('../../assets/images/parking0.svg') no-repeat;
}
.parking:nth-child(2) {
    background: url('../../assets/images/parking1.svg') no-repeat;
}
.parking:nth-child(3) {
    background: url('../../assets/images/parking2.svg') no-repeat;
}
.bind:nth-child(1) {
    background: url('../../assets/images/offline.svg') no-repeat;
}
.bind:nth-child(2) {
    background: url('../../assets/images/online.svg') no-repeat;
}
.bind:nth-child(3) {
    background: url('../../assets/images/warning.svg') no-repeat;
}
.legend {
    display: flex;
}
.point {
    flex: 3;
}
.statusIcon,
.point > span {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border-radius: 50%;
}
.statusIcon:nth-child(1) {
    background: #1f807f;
}
.statusIcon:nth-child(2) {
    background: #f70000;
}
.statusIcon:nth-child(3) {
    background: #c3c3c3;
}
</style>